<template>
    <div class="app-wrap">
        <div class="login_content">
            <div class="login_head">
                <div>
                    <nuxt-link to="/">
                        <img class="logo" src="@/assets/images/logo.png" />
                    </nuxt-link>
                </div>
                <div class="return_shop">
                    <nuxt-link to="/">返回商城</nuxt-link>
                </div>
            </div>
            <div class="login_input_flex">
                <div class="login_input_view">
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="账号登录" name="first">
                            <div class="login">
                                <el-form ref="standardForm" :model="form" class="login_input_value">
                                    <el-form-item prop="name">
                                        <el-input v-model="form.name" placeholder="请输入账号"></el-input>
                                    </el-form-item>
                                    <el-form-item prop="password">
                                        <el-input type="password" v-model="form.password" autocomplete="off" placeholder="请输入密码"></el-input>
                                    </el-form-item>
                                    <el-form-item class="forget_pass">
                                        <div class="left">
                                            <el-checkbox v-model="checked"></el-checkbox>记住我
                                        </div>
                                        <nuxt-link to="/memberCenter/password">忘记密码?</nuxt-link>
                                        <!-- <a href=""></a> -->
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button class="login_button" round @click="loginHandler()">登录</el-button>
                                    </el-form-item>
                                    <el-form-item class="xieyi" prop="agreement">
                                        <el-checkbox label="" v-model="form.agreement" name="type"></el-checkbox><span>我已阅读并同意<a href="">《用户协议》</a></span>
                                    </el-form-item>
                                </el-form>
                                <div class="register_account">
                                    <nuxt-link to="/memberCenter/register">注册账号</nuxt-link>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="快捷登录" name="second">
                            <div class="login-phone">
                                <el-form ref="form" :model="form" class="login_input_value">
                                    <el-form-item>
                                        <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
                                    </el-form-item>
                                    <el-form-item class="code-box">
                                        <el-input v-model="form.send_code" placeholder="请输入验证码"></el-input>
                                        <div class="send_code">获取验证码</div>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button class="login_button" round>登录</el-button>
                                    </el-form-item>
                                    <el-form-item class="xieyi">
                                        <el-checkbox label="" name="type"></el-checkbox><span>我已阅读并同意<a href="">《用户协议》</a></span>
                                    </el-form-item>
                                </el-form>
                                <div class="register_account">
                                    <nuxt-link to="/memberCenter/register">注册账号</nuxt-link>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
                
                <div class="copyright">Copyright © 2002-2023 {{ siteInfo.site_name }}. All Rights Reserved. {{ siteInfo.site_beian }}.</div>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapActions } from 'vuex'
    export default {
        name:"user-login",
        layout: "register",
        data() {
            return {
                activeName: 'first',
                form: {
                    name: "",
                    password: "",
                    agreement: false
                },
                checked: false,
                // 标准登录信息校验
                standardRules: {
                    name: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
                    agreement: [
                        { required: true, message: '请选择活动资源', trigger: 'change' }
                    ],
                }
            };
        },
        mounted: function(){
            // 头部加载一次以后直接使用
            this.GetSiteInfo()
        },
        computed:{
            siteInfo(){
                return this.$store.state.site
            }
        },
        methods: {
            ...mapActions(['GetSiteInfo','UserLogin']),
            // 实际登录操作
            loginHandler: function () {
                let _this = this;
                if (_this.form.name.length === 0) {
                    _this.$message({
                        message: "账号不能为空",
                        type: "error",
                        duration: 5 * 1000,
                    });
                    return;
                }
                if (_this.form.password.length === 0) {
                    _this.$message({
                        message: "密码不能为空",
                        type: "error",
                        duration: 5 * 1000,
                    });
                    return;
                }
                if (_this.form.agreement == false) {
                    _this.$message({
                        message: "请勾选用户协议",
                        type: "error",
                        duration: 5 * 1000,
                    });
                    return;
                }
                let input = {
                    account: _this.form.name,
                    password: _this.form.password
                }
                _this.UserLogin(input)
                    .then(res => {
                    // 成功之后跳转到个人中心去,目前是首页
                        _this.$router.replace({
                            path: `/`,
                        })
                    })
                    .catch(e => {
                    
                    });
            },
            handleClick(tab, event) {
                console.log(tab, event);
            }
        }
    };
</script>
<style>
    @import url(@/assets/css/login.css);
</style>